<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>数据代理</title>
  <script type="text/javascript" src="../../static/lib/vue/vue.js"></script>
</head>
<body>
<!--
    关于Vue中的数据代理：
        1.什么是数据代理？
            (1).配置对象data中的数据，会被收集到vm._data中，然后通过，Object.defineProperty让vm上拥有data中所有的属性。
            (2).当访问vm的msg时，返回的是_data当中同名属性的值
            (3).当修改vm的msg时，修改的是_data当中同名属性的值
        2.为什么要数据代理？
            为了更加方便的读取和修改_data中的数据，不做数据代理，就要：vm._data.xxx访问数据
        3.扩展思考？—— 为什么要先收集在_data中，然后再代理出去呢？
            更高效的监视数据（直接收集到vm上会导致监视效率太低）
-->

<!-- 准备好一个容器-->
<div id="root">
  <h2>学校名字：{{name}}</h2>
  <h2>学校地址：{{address}}</h2>
  <h2>学科：{{subject}}</h2>
</div>

<script type="text/javascript">
  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      address: '宏福科技园综合楼',
      subject: '前端',
    }
  })
  console.log(vm.address) //通过vm可以读取data中的address
  vm.address = '北七家镇' //通过vm可以修改data中的address

  let number = 18
  let person = {}
  Object.defineProperty(person, "name", {
    // value:18,
    // enumerable:true, //控制属性是否可以枚举，默认值是false
    // writable:true, //控制属性是否可以被修改，默认值是false
    // configurable:true //控制属性是否可以被删除，默认值是false

    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
      console.log('有人读取age属性了')
      return number
    },

    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
      console.log('有人修改了age属性，且值是',value)
      number = value
    }
  })
  console.log(person)
</script>

</body>
</html>